<template>
  <div class="tool-upload-page">
    <div class="tool-upload-card">
      <div v-if="isAdmin">
        <div class="tool-upload-flex">
          <div class="tool-upload-form-wrap">
            <el-form :model="form" label-width="110px" ref="formData" class="tool-upload-form">
              <el-form-item label="载荷名称:" prop="name">
                <el-input v-model="form.name" placeholder="请输入载荷名称"></el-input>
              </el-form-item>
              <el-form-item label="载荷类型:" prop="ltName">
                <el-select v-model="form.ltName" placeholder="请选择模型框架">
                  <el-option label="扫描探测" value="扫描探测"></el-option>
                  <el-option label="远程漏洞利用" value="远程漏洞利用"></el-option>
                  <el-option label="远程控制" value="远程控制"></el-option>
                  <el-option label="本地提权" value="本地提权"></el-option>
                  <el-option label="数据隐蔽回传" value="数据隐蔽回传"></el-option>
                  <el-option label="消痕" value="消痕"></el-option>
                  <el-option label="内网渗透" value="内网渗透"></el-option>
                  <el-option label="拒绝服务" value="拒绝服务"></el-option>
                  <el-option label="爬虫" value="爬虫"></el-option>
                  <el-option label="密码爆破" value="密码爆破"></el-option>
                  <el-option label="webshell" value="webshell"></el-option>
                  <el-option label="SQL注入" value="SQL注入"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="模型框架:" prop="frameType">
                <el-select v-model="form.frameType" placeholder="请选择模型框架">
                  <el-option label="初始化访问" value="初始化访问"></el-option>
                  <el-option label="执行" value="执行"></el-option>
                  <el-option label="持续深入" value="持续深入"></el-option>
                  <el-option label="提权" value="提权"></el-option>
                  <el-option label="破防" value="破防"></el-option>
                  <el-option label="权限访问" value="权限访问"></el-option>
                  <el-option label="信息收集" value="信息收集"></el-option>
                  <el-option label="横向渗透" value="横向渗透"></el-option>
                  <el-option label="收集取证" value="收集取证"></el-option>
                  <el-option label="命令和控制" value="命令和控制"></el-option>
                  <el-option label="数据泄露" value="数据泄露"></el-option>
                  <el-option label="影响" value="影响"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="载荷简介:" prop="desc">
                <el-input v-model="form.desc" type="textarea" placeholder="请输入载荷简介"></el-input>
                
              </el-form-item>
              <el-form-item label="载荷版本:" prop="version">
                <el-input v-model="form.version" placeholder="请输入载荷版本"></el-input>
              </el-form-item>
              <el-form-item label="载荷说明:" prop="useDesc">
                <el-input v-model="form.useDesc" type="textarea" placeholder="请输入载荷说明"></el-input>
              </el-form-item>
              <el-form-item label="载荷操作系统:" prop="operSystem">
                <el-input v-model="form.operSystem" placeholder="请输入载荷操作系统"></el-input>
              </el-form-item>
              <el-form-item label="组件信息版本:" prop="componentInfoVersion" class="input-item">
                <el-input v-model="form.componentInfoVersion" placeholder="请输入组件信息及版本"></el-input>
              </el-form-item>
              <el-form-item label="安装说明:" prop="installDesc">
                <el-input v-model="form.installDesc" type="textarea" placeholder="请输入安装说明"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">立即添加</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="tool-upload-upload-wrap">
            <el-upload class="upload-demo" list-type="picture-card" :file-list="imageList"
              :before-upload="beforeImageUpload" :action="imageUploadUrl" :headers="headers"
              :on-preview="handlePictureCardPreview" :on-success="handleImageSuccess" :on-error="handleError">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="预览图片" />
            </el-dialog>
            <el-upload class="upload-demo" :file-list="fileList" :before-upload="beforeFileUpload" multiple drag
              :action="fileUploadUrl" :headers="headers" :on-success="handleFileSuccess" :on-error="handleError">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
                <p>仅支持压缩包 .zip .rar .gz .tar .bz2 .tar .xz</p>
              </div>
              <div class="el-upload__tip" slot="tip">
                支持单个或批量上传
                <p>文件最大100M</p>
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <div v-else class="no-permission">
        <p>您没有权限使用工具上传功能。</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import $axios from "@/unil/index.js";

export default {
  data() {
    return {
      dialogImageUrl: "", // 当前预览的图片 URL
      dialogVisible: false, // 控制图片预览弹窗显示

      form: {
        name: "",
        ltName: "",
        frameType: "", // 新增字段
        desc: "",
        version: "",
        useDesc: "",
        operSystem: "",
        pic: "",
        filePath: "",
        installDesc: "",
      },

      fileList: [], // 文件列表
      imageList: [], // 图片列表
      fileUploadUrl: "http://192.168.124.9:8888/tool/general/upload",
      imageUploadUrl: "http://192.168.124.9:8888/tool/general/upload",
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
    };
  },
  computed: {
    ...mapGetters("permissions", ["isAdmin"]),
  },
  mounted() {
    console.log(
      "工具上传组件挂载，isAdmin权限状态:",
      this.$store.getters["permissions/isAdmin"],
      "isManager值:",
      this.$store.state.permissions.isManager
    );
  },
  methods: {
    async onSubmit() {
      const valid = await new Promise((resolve) => {
        this.$refs.formData.validate((valid) => {
          resolve(valid);
        });
      });
      if (valid) {
        console.log("提交数据:", this.form);
        try {
          const res = await $axios.post("/tool/general/insert", this.form);
          console.log("提交响应:", res);
          this.$message.success("工具添加成功");
          this.resetForm();
        } catch (error) {
          console.error("提交失败:", error);
          this.$message.error("工具添加失败，请稍后再试");
        }
      } else {
        console.log("表单验证未通过");
      }
    },
    resetForm() {
      this.$refs.formData.resetFields(); // 重置表单
      this.fileList = [];
      this.imageList = [];
    },
    beforeFileUpload(file) {
      console.log("准备上传文件:", file.name);
      // 增加文件大小检查，限制为100M
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isLt100M) {
        this.$message.error('上传文件大小不能超过 100MB!');
        return false;
      }
      return true;
    },
    beforeImageUpload(file) {
      console.log("准备上传图片:", file.name);
      // 增加图片大小检查
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10MB!');
        return false;
      }
      return true;
    },
    handleFileSuccess(response, file, fileList) {
      console.log("文件上传成功:", response.data);
      this.form.filePath = response.data; // 更新表单中的文件路径
      this.fileList = fileList; // 更新文件列表
      this.$message.success("文件上传成功");
    },
    handleImageSuccess(response, file, fileList) {
      this.form.pic = response.data; // 更新表单中的图片路径
      console.log("图片上传成功:", this.form.pic);
      this.imageList = fileList; // 更新图片列表
      this.$message.success("图片上传成功");
    },
    handleError(error) {
      console.error("上传失败:", error);
      this.$message.error("上传失败,仅支持压缩包 .zip .rar .gz .tar .bz2 .tar .xz");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url || file.response?.url; // 获取图片 URL
      this.dialogVisible = true; // 打开预览弹窗
    },
  },
};
</script>

<style scoped>
.tool-upload-page {
  min-height: 100vh;
  background: #232323;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 0 0 0;
}

.tool-upload-card {
  background: #262626;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
  padding: 36px 36px 24px 36px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.tool-upload-flex {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: flex-start;
  justify-content: center;
}

.tool-upload-form-wrap {
  flex: 1 1 380px;
  min-width: 340px;
  max-width: 420px;
}

.tool-upload-upload-wrap {
  flex: 1 1 380px;
  min-width: 340px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tool-upload-form {
  color: #fff;
  background: transparent;
  border-radius: 8px;
  padding: 0;
}

.upload-demo {
  border: 2px dashed #444;
  border-radius: 8px;
  background-color: #232323;
  text-align: center;
  padding: 18px;
  transition: border-color 0.3s;
  margin-bottom: 18px;
  width: 100%;
}

::v-deep.upload-demo .el-upload-dragger {
  background-color: #232323;
  color: #fff;
}

::v-deep .upload-demo .el-upload--picture-card {
  background-color: #232323;
  color: #fff;
}

::v-deep .upload-demo .el-upload-dragger .el-upload__text {
  color: #fff;
}

::v-deep .el-form-item__content .el-input .el-input__inner {
  background: #232323 !important;
}

::v-deep .el-form-item .el-form-item__label {
  color: #fff !important;
}

.upload-demo:hover {
  border-color: #409eff;
}

.el-upload__text em {
  color: #409eff;
  cursor: pointer;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-form-item,
.el-form-item__label,
.el-input__inner {
  color: #ccc !important;
  background: transparent !important;

}

::v-deep .el-input .el-input__inner,
::v-deep .el-textarea__inner {
  background-color: #232323 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 4px;
}

.el-button {
  margin-right: 10px;
  background: #232323;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.el-button[type="primary"] {
  background: #409eff;
  color: #fff;
  border: none;
}

.el-button:hover {
  background: #333;
  color: #ffd04b;
}

.no-permission {
  text-align: center;
  color: #ff4d4f;
  font-size: 16px;
  margin-top: 20px;
}

::v-deep .el-select-dropdown,
::v-deep .el-select-dropdown__item {
  background-color: #232323 !important;
  color: #fff !important;
}

::v-deep .el-select-dropdown__item.selected {
  background-color: #222 !important;
  color: #ffd04b !important;
}

::v-deep .el-dialog__wrapper .el-dialog {
  background: #262626 !important;
  color: #fff !important;
  border-radius: 12px;
}

::v-deep .el-dialog__header,
::v-deep .el-dialog__body,
::v-deep .el-dialog__footer {
  background: #262626 !important;
  color: #fff !important;
}

::v-deep .el-dialog__header .el-dialog__title {
  color: #fff !important;
}

::v-deep .el-message-box__header,
::v-deep .el-message-box__container,
::v-deep .el-message-box__content,
::v-deep .el-message-box__btns {
  background-color: #2e2e2e !important;
  color: #fff !important;
}

::v-deep .el-input__inner::placeholder,
::v-deep .el-textarea__inner::placeholder {
  color: #bbb !important;
  opacity: 1;
}
</style>
